import { ElTooltip, ElMessageBox, ElImage } from "element-plus";
import { Close, Minus } from "@element-plus/icons-vue";

import Styles from "./index.module.less";
import Logo from "../../static/images/logo.svg";
import useSendEvent from "@/hocks/useSendEvent";

export default {
    data: () => ({
        sendEvent: null,
        appInfo: {},
    }),
    methods: {
        minWindow() {
            this.sendEvent("minWindow");
        },
        exitWindow() {
            ElMessageBox.confirm("确认要退出图片处理程序吗？", "退出程序", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                draggable: true,
            })
                .then(() => {
                    this.sendEvent("exitWindow");
                })
                .catch((e) => e);
        },
        async getAppInfo() {
            this.appInfo = await this.sendEvent("getAppInfo");
            return this.appInfo;
        },
    },
    mounted() {
        this.sendEvent = useSendEvent();
        this.getAppInfo();
        window.electron.listenerIpc("exitWindow", () => {
            this.exitWindow();
        });
    },
    render() {
        return (
            <section className={Styles.pageHeader}>
                <h4 className={Styles.title}>
                    <ElImage src={Logo}></ElImage>
                    <span>{this.appInfo.title}</span>
                </h4>
                <section className={Styles.windowOperate}>
                    <ElTooltip
                        effect="dark"
                        content="最小化程序"
                        placement="top-start"
                    >
                        <span
                            onClick={this.minWindow}
                            className={Styles.iconElement}
                        >
                            <Minus />
                        </span>
                    </ElTooltip>

                    <ElTooltip
                        effect="dark"
                        content="退出程序"
                        placement="top-start"
                        className={Styles.iconElement}
                    >
                        <span onClick={this.exitWindow}>
                            <Close />
                        </span>
                    </ElTooltip>
                </section>
            </section>
        );
    },
};
